<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <title>我的已办</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="./css/layuiAdminTheme.css" />
    <style type="text/css">
        .layui-form-label {
            width: auto !important;
        }

        .operation span:last-of-type {
            color: #F5222D;
        }

        .pageNav {
            margin: 0 auto;
            width: fit-content;
        }

        .pageNav a,
        .operation span {
            cursor: pointer;
            display: inline-block;
        }

        cite {
            cursor: default;
        }
        td {
            white-space: nowrap;
            text-align: center;
        }
    </style>
</head>
<body>
<script src="./js/main.js" charset="utf-8"></script>
<script src="./layui/laydate/laydate.js" charset="utf-8"></script>
<script src="./layui/layui.js" charset="utf-8"></script>
<script src="./js/jQuery.main.js"></script>

<form class="layui-form" action="" lay-filter="data">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">搜索：</label>
            <input type="text" name="orderNum" id="orderNum" class="layui-input" style="width: 15em;" placeholder="工单编号" value="">
        </div>
        <div class="layui-input-inline " style="width: 15em">
            <select name="dept" id="dept" lay-verify="required" lay-filter="dept">
            </select>
        </div>
<!--        <div class="layui-inline" style="display: none">-->
<!--            <select id="reportStatus" type="text" name="reportStatus" class="layui-input" style="width: 8em;" lay-filter="reportStatus">-->
<!--                <option value="">请选择完工状态...</option>-->
<!--                <option value="0">未完工</option>-->
<!--                <option value="1">已完工</option>-->
<!--            </select>-->
<!--        </div>-->
<!--        <div class="layui-inline" style="display: none">-->
<!--            <select id="missingStatus" type="text" name="missingStatus" class="layui-input" style="width: 8em;" lay-filter="missingStatus">-->
<!--                <option value="">请选择缺数状态...</option>-->
<!--                <option value="0">未缺记录</option>-->
<!--                <option value="1">缺数记录</option>-->
<!--            </select>-->
<!--        </div>-->
        <div class="layui-inline">
            <select id="pinName" type="text" name="pinName" class="layui-input"  style="width: 10em;"lay-filter="pinName">
                <option value="">请选择产品类型...</option>
            </select>
        </div>
        <div class="layui-inline">
            <select id="process" type="text" name="process" class="layui-input"  style="width: 10em;"lay-filter="process">
                <option value="">请选择工序站...</option>
            </select>
        </div>
        <div class="layui-inline" style="margin: 3px">
            <label class="layui-form-label">日期范围:</label>
            <div class="layui-inline" id="dateDiv">
                <div class="layui-input-inline">
                    <input type="text" id="startDate" class="layui-input" placeholder="开始日期">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline">
                    <input type="text" id="endDate" class="layui-input" placeholder="结束日期">
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <input type="text" name="displayLength" class="layui-input" style="display: none;" placeholder="每页页数" value="10">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="searchBtn">搜索已办记录</button>
            <button type="button" class="layui-btn layui-bg-red" lay-submit="" lay-filter="exportBtn">导出报表</button>
        </div>
    </div>
</form>

<table class="layui-table" lay-skin="line">
    <thead>
    <tr>
<!--        <th>ID</th>-->
        <th style="text-align: center">工单号</th>
        <th style="text-align: center">产品名</th>
        <th style="text-align: center">上报的工序</th>
        <th style="text-align: center">上报时间
            <span class="layui-table-sort layui-inline">
              <i class="layui-edge layui-table-sort-asc" title="升序" onclick="sortTimeOfReport('asc')"></i>
              <i class="layui-edge layui-table-sort-desc" title="降序" onclick="sortTimeOfReport('desc')"></i>
            </span></th>
        <th style="text-align: center">上报数量</th>
        <th style="text-align: center">不良品数量</th>
        <th style="text-align: center">完工状态</th>
        <th style="text-align: center">执行人</th>
        <th style="text-align: center">耗材批号</th>
        <th style="text-align: center">CORE批号</th>
        <th style="text-align: center">操作</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>
<div style="display: flex;">
    <div style="flex: 1">
        <div class="pageNav">
          <span class="layui-breadcrumb" lay-separator="-">
            <a class="fristPage">首页</a>
            <a class="lastPage">上一页</a>
            <a><cite>第<span id="page"></span>页</cite></a>
            <a class="totalPage"><cite>共<span id="total">0</span>页</cite></a>
            <a class="nextPage">下一页</a>
            <a class="endPage">尾页</a>
          </span>
        </div>
    </div>
</div>

<script type="text/javascript">
    var displayStart = 1;
    var endPage = null;
    var layer = layui.layer;
    var form = null;
    var list = null;

    laydate.render({
        elem: '#dateDiv'
        //设置开始日期、日期日期的 input 选择器
        //数组格式为 5.3.0 开始新增，之前版本直接配置 true 或任意分割字符即可
        ,range: ['#startDate', '#endDate']
    });
    layui.use(['form', 'element'], function() {
        form = layui.form;
        $.ajax({
            url: url + '/sys-dept/listDept',
            method: 'POST',
            async : false,
            contentType: 'application/json',
            success: function(res) {
                //显示前先判断是否为管理员
                $.ajax({
                    url: '/sys-user/getAdmin/'+sessionStorage.getItem('userId'),
                    method: 'GET',
                    async : false,
                    contentType: 'application/json',
                    success: function (res) {
                        if (res.code===200){
                            isAd=1;
                        }
                        else if (res.code===400){
                            isAd=0;
                            thisDept=res.data.dept;
                        }
                    }
                })
                //按照是否为管理员显示下拉框
                if (res.code == 200) {
                    for (var i = 0; i < res.data.length; i++) {
                        if(isAd===1){
                            $("#dept").append("<option value='" + res.data[i].id + "'>" + res.data[i].dept +"</option>");
                        }else if (isAd===0&&res.data[i].dept===thisDept){
                            $("#dept").append("<option selected='selected' value='" + res.data[i].id + "'>" + res.data[i].dept +"</option>").attr('disabled','disabled');
                        }
                    }
                    form.render('select');
                }
            }
        })
        //工序下拉框
        $.ajax({
            url: url + '/process-info/listProcess',
            method: 'POST',
            async : false,
            contentType: 'application/json',
            data: JSON.stringify({
                deptId: $("#dept").val()
            }),
            success: function(res) {
                if (res.code == 200) {
                    for (var i = 0; i < res.data.length; i++) {
                        $("#process").append("<option value='" + res.data[i].id + "'>" + res.data[i].processName +
                            "</option>");
                    }
                    form.render('select');
                }
            }
        })
        //品名下拉框联动
        $.ajax({
            url: url + '/pin-library/listPinName',
            method: 'POST',
            async : false,
            contentType: 'application/json',
            data: JSON.stringify({
                userId:"",
                deptId: $('#dept').val()
            }),
            success: function(res) {
                $("#pinName").empty();
                if (res.code == 200) {
                    $("#pinName").append("<option value=''>请选择产品类型....</option>");
                    for (var i = 0; i < res.data.length; i++) {
                        $("#pinName").append("<option value='" + res.data[i].id + "'>" + res.data[i].pinName +
                            "</option>");
                    }
                    form=layui.form;
                    form.render('select');
                }
            }
        })
        //下拉框二级联动---点击部门下拉框
        form.on('select(dept)', function(data) {
            $("#process").empty()
            $("#pinName").empty();
            //工序下拉框
            $.ajax({
                url: url + '/process-info/listProcess',
                method: 'POST',
                async : false,
                contentType: 'application/json',
                data: JSON.stringify({
                    deptId: $("#dept").val()
                }),
                success: function(res) {
                    $("#process").append("<option value=''>请选择工序站....</option>");
                    if (res.code == 200) {
                        for (var i = 0; i < res.data.length; i++) {
                            $("#process").append("<option value='" + res.data[i].id + "'>" + res.data[i].processName +
                                "</option>");
                        }
                        form.render('select');
                    }
                }
            })
            //品名下拉框联动
            $.ajax({
                url: url + '/pin-library/listPinName',
                method: 'POST',
                async : false,
                contentType: 'application/json',
                data: JSON.stringify({
                    userId:"",
                    deptId: $('#dept').val()
                }),
                success: function(res) {
                    $("#pinName").append("<option value=''>请选择产品类型....</option>");
                    if (res.code == 200) {
                        for (var i = 0; i < res.data.length; i++) {
                            $("#pinName").append("<option value='" + res.data[i].id + "'>" + res.data[i].pinName +
                                "</option>");
                        }
                        form=layui.form;
                        form.render('select');
                    }
                }
            })
            form.render('select');
        });
        search(1,'desc');
        form.on('submit(searchBtn)', function() {
            search(1,'desc');
            return false;
        });
        $('.fristPage').click(function() {
            search(1,'desc');
            return false;
        });
        $('.lastPage').click(function() {
            search((displayStart > 1 ? displayStart - 1 : 1),'desc');
            return false;
        });
        $('.nextPage').click(function() {
            search((displayStart < endPage ? displayStart + 1 : endPage),'desc');
            return false;
        });
        $('.endPage').click(function() {
            search(endPage,'desc');
            return false;
        })

        //导出
        form.on('submit(exportBtn)', function() {
            var data = [];
            //数据定格
            data[0]=sessionStorage.getItem('loginName');
            data[1]=$('#orderNum').val();//orderNum
            data[2]=$('#process').val();
            data[3]=$('#dept').val();
            data[4]=$('#startDate').val();
            data[5]=$('#endDate').val();
            data[6]=$('#pinName').val();
            let confirm1=layer.confirm('按照所选条件导出结果报表？', {
                    btn: ['确认','取消']
                },function () {
                    layer.open({
                        type: 2,
                        title: '下载提示框',
                        shadeClose: true,
                        shade: false,
                        maxmin: true, //开启最大化最小化按钮
                        area: ['300px', '300px'],
                        content: url+'/excel/exportReportInfo/'+data
                    });
                    layer.close(confirm1);
                    layer.alert('正在导出..请选择允许下载多项！！！导出后在下载记录里可以找到!', {
                        icon: 1,
                        skin: 'layer-ext-demo', //见：扩展说明
                        end: function () {
                            //关闭弹出
                            layer.closeAll('iframe');
                            search(1)
                        }
                    })
                }
                ,function (){
                    layer.close(confirm1);
                }
            )
        });
    })



    //时间排序方法
    function sortTimeOfReport(data) {
        search(1,data)
    }

    //详情
    function reportInfo(index) {
        if (!index) return false;
        layer.open({
            type: 1,
            skin: 'layui-layer-rim',
            area: ['400px', '570px'],
            title: '详情信息',
            content: `
                <div style=" margin: 15px"></div>
                <div>
                <label class="layui-form-label">工单号：</label>
                <div class="layui-input-inline " style="width: 15em"  >
                <input id="orderNumOfInfo" type="text" name="orderNumOfInfo" placeholder="工单号" lay-verify="required" class="layui-input" style="width: 19em !important;" readonly="readonly">
                </div></div>
                <div>
                <label class="layui-form-label" style="margin: 10px 0;">涉及工序：</label>
                <div class="layui-input-inline " style="width: 15em">
                <input id="process" type="text" name="process" placeholder="涉及工序" lay-verify="required" class="layui-input" style="margin: 10px 0; width: 18em !important;" readonly="readonly"></div></div>
                <label class="layui-form-label" style="color: #F5222D">上报工序：</label>
                <div class="layui-input-inline " style="width: 15em">
                <input id="myProcess" type="text" name="myProcess" placeholder="我参与的工序" lay-verify="required" class="layui-input" style="margin-bottom: 10px;width: 17em !important;" readonly="readonly"></div>
                <div>
                <label class="layui-form-label">计划数量(单位)：</label>
                <div class="layui-input-inline " style="width: 15em">
                <input id="amountPlan" type="text" name="amountPlan" placeholder="输入数量(单位)" lay-verify="required" class="layui-input" style="width: 15.5em !important;" readonly="readonly"></div></div>
                <div>
                <label class="layui-form-label" style="margin: 10px 0;color: #F5222D">上报的数量：</label>
                <div class="layui-input-inline " style="width: 15em">
                <input id="amount" type="text" name="amount" placeholder="上报数量" lay-verify="required" class="layui-input" style="margin: 10px 0;width: 16em !important;" readonly="readonly"></div></div>
                <div>
                <label class="layui-form-label" style="color: #F5222D">上报的不良数：</label>
                <div class="layui-input-inline " style="width: 15em">
                <input id="badAmount" type="text" name="badAmount" placeholder="不良数" lay-verify="required" class="layui-input" style="margin-bottom: 10px;width: 15em !important;" readonly="readonly"></div></div>
                <div>
                <label class="layui-form-label">缺数：</label>
                <div class="layui-input-inline " style="width: 15em">
                <input id="missingAmount" type="text" name="missingAmount" placeholder="缺数" lay-verify="required" class="layui-input" style="margin-bottom: 10px;width: 20em !important;" readonly="readonly"></div></div>
                <div>
                <label class="layui-form-label">上报时间：</label>
                <div class="layui-input-inline " style="width: 15em">
                <input id="createTime" type="text" name="createTime" placeholder="上报时间" lay-verify="required" class="layui-input" style=" width: 18em !important;" readonly="readonly"></div></div>

                <div>
                <label class="layui-form-label" style="margin: 10px 0;">工序上报人：</label>
                <div class="layui-input-inline " style="width: 15em">
                <input id="reporter" type="text" name="reporter" placeholder="工序上报人" lay-verify="required" class="layui-input" style="margin:10px;width: 16.5em !important;" readonly="readonly"></div></div>

                <div align="center" style="margin: 20px"><button class="layui-btn layui-btn-danger" onclick="layer.closeAll()"><b><i class="layui-icon">&#xe605;</i></b></button></div>

            `,

            success: function(){
                $.ajax({
                    url: url + '/report-order/myDoneInfo/' + index,
                    contentType: 'application/json',
                    async: false,
                    success: function (res) {
                        if(res.code===200){
                            $('#orderNumOfInfo').val(res.data.orderNum);
                            $('#process').val(res.data.process);
                            $('#myProcess').val(res.data.reportProcess);
                            $('#amountPlan').val(res.data.amountPlan);
                            $('#amount').val(res.data.reportAmount);
                            $('#badAmount').val(res.data.badAmount);
                            $('#missingAmount').val(res.data.missingAmount);
                            $('#createTime').val(res.data.createTime);
                            $('#reporter').val(res.data.reporter);
                            form.render()
                        }else{
                            layer.msg(res.msg)
                        }
                    }
                })
            }
        })
    }

    function search(index,status) {
        //加载层遮罩
        var loading = layer.load(3, {
            shade: [0.1,'#fff'] //0.1透明度的白色背景
        });
        if (!index) var index = displayStart;
        var data = form.val('data');
        data.displayStart = index;
        data.workerNo=sessionStorage.getItem('loginName');
        data.missingStatus=$('#missingStatus').val();
        data.reportStatus=$('#reportStatus').val();
        data.startDate=$('#startDate').val();
        data.endDate=$('#endDate').val();
        data.pinId=$('#pinName').val();
        data.desc=status;
        $.ajax({
            url: url + '/report-order/myDone',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function(res) {
                //关闭加载层
                layer.close(loading)
                $('tbody').empty();
                displayStart = res.data.current;
                endPage = res.data.pages;
                list = res.data.records;
                for (var i = 0; i < res.data.records.length; i++) {
                    $('tbody').append(
                        "<tr>" +
                        "<td style='color: #1E9FFF;'>" + res.data.records[i].orderNum +"</td>" +
                        "<td style='color: #1E9FFF;'>" + res.data.records[i].pinName +"</td>" +
                        "<td style='color: #1E9FFF;'>" + res.data.records[i].reportProcess + "</td>" +
                        "<td style='color:#1E9FFF;'>" + res.data.records[i].createTime.replace('T', ' ') + "</td>" +
                        "<td>" + res.data.records[i].reportAmount + "</td>" +
                        "<td>" +res.data.records[i].badAmount + "</td>" +
                        "<td>" +isReportStatus(res.data.records[i].over) + "</td>" +
                        "<td>" +res.data.records[i].processWorker + "</td>" +
                        "<td>" +res.data.records[i].stuffNum + "</td>" +
                        "<td>" +res.data.records[i].coreNum + "</td>" +
                        "<td class='operation'>" +
                        "<button type='button' class='layui-btn layui-btn-warm layui-btn-sm' onclick='reportInfo(" + res.data.records[i].id+")'>详情</button>" +
                        "</td></tr>"
                    );
                }
                if(res.data.records.length==0){
                    $('#total').html(0)
                }else
                    $('#total').html(Math.ceil(res.data.records[0].allTotal/10))
                $('#page').html(displayStart)
            }
        })
    }
</script>
</body>
</html>